<template>
    <h1>投资项目信息展示页面</h1>

    投资项目名称:<input type="text" placeholder="请输入投资项目名称" v-model="Name" />
    投资项目最低金额:<input type="text" placeholder="请输入投资项目最低金额" v-model="MinMoney" />
    投资项目最高金额:<input type="text" placeholder="请输入投资项目最高金额" v-model="MaxMoney" />
    <input type="button" value="查询" @click="ShowInvest" />

    <table>
        <thead>
            <tr>
                <th>投资名称</th>
                <th>投资总额度</th>
                <th>已投资额度</th>
                <th>剩余额度</th>
                <th>投资人数</th>
                <th>操作</th>
            </tr>
        </thead>

        <tbody>
            <tr v-for="item in Invest">
                <td>{{ item.I_Name }}</td>
                <td>{{ item.I_SumMoney }}</td>
                <td>{{ item.I_YMoney }}</td>
                <td>{{ item.I_SMoney }}</td>
                <td>{{ item.I_Count }}</td>
                <td>
                    <input type="button" value="删除" @click="delData(item.I_Id)" />
                    <input type="button" value="修改" />
                </td>
            </tr>
        </tbody>

    </table>

</template>

<script setup lang="ts">

import { ref,onMounted } from 'vue';
import axios from 'axios';

//用于显示的响应式数据
const Invest = ref([{
    I_Id:'',
    I_Name:'',
    I_SumMoney:'',
    I_YMoney:'',
    I_SMoney:'',
    I_Count:''
}])

//用于查询的响应式数据
const Name = ref('');
const MinMoney = ref('');
const MaxMoney = ref('');

//生命周期钩子函数
onMounted (() => {
    ShowInvest()
})

//查询方法
const ShowInvest = () => {
    axios({
        method:'get',
        url:'http://localhost:62946/api/Invest/ShowInvest',
        params:{
            Name:Name.value,
            MinMoney:MinMoney.value,
            MaxMoney:MaxMoney.value
        }
    })
    .then((res) => {
        console.log(res.data);
        Invest.value = res.data
    })
    .catch((err) => {
        console.log(err);
    })
}

//删除方法
const delData = (id:string) => {

    if(confirm('确定要删除吗？')){
        axios({
        method:'get',
        url:'http://localhost:62946/api/Invest/DelData',
        params:{
            Id:id
        }
    })
    .then((res) => {
        if(res.data > 0){
            alert('删除成功')
            ShowInvest();
        }else{
            alert('删除失败')
            ShowInvest();
        }
    })
    .catch((err) => {
        console.log(err);
    })



    }

}


</script>
